<template>
	<view class="article">
		<view class="item" v-for="item in articleList" :key="item.id" @click="toPage(item.id)">
			<view class="title">{{ item.title }}</view>
			<view class="content">{{ item.content }}</view>
			<view class="info">
				<image :src="item.avatar" mode=""></image>
				<text class="name">{{ item.nickname }}</text>
			</view>
		</view>
		<view class="create" @click="toPage(0)">
			<uv-icon name="plus-circle-fill" size="42" color="primary"></uv-icon>
		</view>
	</view>
</template>

<script>
import { getArticleList } from '@/apis/article/index.js';

export default {
	data() {
		return {
			articleList: [] // 文章列表
		};
	},
	onShow() {
		this.initData();
	},
	methods: {
		async initData() {
			const res = await getArticleList();
			this.articleList = res.data;
		},
		toPage(id) {
			uni.navigateTo({ url: '/pages/information/create?id=' + id });
		}
	}
};
</script>

<style lang="scss" scoped>
.article {
	position: relative;
	padding: 30rpx;
	.item {
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 16rpx;
		background-color: #fff;
		.title {
			font-size: 36rpx;
			font-weight: bold;
		}
		.content {
			font-size: 30rpx;
			margin: 20rpx 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			white-space: normal;
		}
		.info {
			display: flex;
			align-items: center;
			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				margin-right: 20rpx;
			}
			.name {
				font-size: 32rpx;
			}
		}
	}
	.create {
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
	}
}
</style>
